<!
触摸事件

三种在规范中列出并跨移动设备广泛实现的基本触摸事件：

touchstart：手指放在一个 DOM 元素上。
touchmove：手指拖动一个 DOM 元素。
touchend：手指从一个 DOM 元素上移开。
每个触摸事件都包括了三个触摸列表：

touches：当前位于屏幕上的所有手指动作的列表。
targetTouches：位于当前 DOM 元素上的手指动作的列表。
changedTouches：涉及当前事件的手指动作的列表。例如，在一个 touchend 事件中，这将是移开手指。>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
<style>
	body {background: #2a2a2a;}
	body,html {overflow: hidden;}
	.arrow {width:6px;height:150px;background: #92c62f;position:absolute;top:300px;left:200px;
		transform-origin:center 20%;
	}
	.arrow span {width:30px;height: 30px;border-radius: 100%;background: #92c62f;position: absolute;bottom:-5px;left:-12px;}


</style>	
</head>
<body>
	
	<div class="arrow">
		<span></span>
	</div>
	
	
</body>
<script>

window.onload = function(){
	document.addEventListener('touchmove',defaultEvent,false);
	
	var pressX = 0;	//初始触摸点位置
	var	pressY = 0;
	var obj = document.querySelector('.arrow');
	obj.addEventListener('touchstart',touchStart,false);
	
	function touchStart(e){
		e.preventDefault();
		var touch = e.changedTouches[0];
		pressX = touch.pageX;
		pressY = touch.pageY;
		obj.addEventListener('touchmove',touchMove,false);
		obj.addEventListener('touchend',touchEnd,false);
		
		t = obj.offsetTop;
		l = obj.offsetLeft;
		console.log("中心点："+t,l)
	}
	
	function touchMove(e){
		if (e.targetTouches.length == 1) {//只允许一个触摸点
			var touch = e.changedTouches[0];
			//一二象限中，edgeB = 对边，edgeA = 邻边 ; 三四象限中相反
			var edgeB = touch.pageX - l;
			var edgeA = touch.pageY -t;
			//取角度的绝对值正数
			var deg1 = Math.abs(Math.round(180*Math.atan(edgeB/edgeA)/Math.PI));	//三 四象限
			var deg2 = Math.abs(Math.round(180*Math.atan(edgeA/edgeB)/Math.PI));	//一 二象限
			if(touch.pageX > l && touch.pageY > t){
				console.log("第四象限")
				this.style.webkitTransform = 'rotate(' + (360-deg1) +'deg)';
				//把结束位置的坐标传回去
				this.setAttribute("data-angle",+ 360-deg1);
				var c = Math.abs(Math.round(Math.sqrt(edgeA*edgeA+edgeB*edgeB)));//计算斜边长度
				//console.log(c)
			}		
			else if(touch.pageX < l && touch.pageY > t){
				console.log("第三象限")
				this.style.webkitTransform = 'rotate(' + deg1 +'deg)';
				//把结束位置的坐标传回去
				this.setAttribute("data-angle",+ deg1);
			}
			else if(touch.pageX < l && touch.pageY < t){
				console.log("第二象限")
				this.style.webkitTransform = 'rotate(' + (90+deg2) +'deg)';
				//把结束位置的坐标传回去
				this.setAttribute("data-angle",+ 90+deg2);
			}
			else if(touch.pageX > l && touch.pageY < t){
				console.log("第一象限")
				this.style.webkitTransform = 'rotate(' + (270-deg2) +'deg)';
				//把结束位置的坐标传回去
				this.setAttribute("data-angle",+ 270-deg2);
			}
		}
		//console.log(touch.pageX,touch.pageY)
	}
	
	function touchEnd(e){
		
	}
	
	//阻止页面的滑动默认事件
	function defaultEvent(e){
		e.preventDefault();
	}

	
}


</script>
</html>